<template>
<view class="security-edit-box h100 bg-white text-black">
  <form>
    <view class="cu-form-group" v-if="ifEditMode">
      <view class="title">原密码</view>
      <input type="text" password :placeholder="`请输入原${curType}密码`" :maxlength="16" name="oldpassword" @input="oldPwdInput"/>
    </view>
    <view class="cu-form-group">
      <view class="title">{{ifEditMode ? '新' : curType}}密码</view>
      <input type="text" password :placeholder="`请输入${ifEditMode ? '新' : ''}${curType}密码`" :maxlength="16" name="newpassword" @input="newPwdInput"/>
    </view>
    <view class="cu-form-group border-bottom">
      <view class="title">再输一次</view>
      <input type="text" password :placeholder="`请再次输入${curType}密码`" :maxlength="16" name="cfmpassword" @input="cfmPwdInput"/>
    </view>
  </form>
  
  <view class="flex flex-direction margin-tb-xl padding">
    <button class="cu-btn dm-btn round bg-orange text-xl" @tap="onConfirm">确认</button>
  </view>
</view>
</template>

<script>
// todo 支付密码
export default {
  name: 'security-edit',
  data () {
    return {
      pageConfig: null,
      typeList: {
        login: '登录',
        pay: '支付'
      },
      modeList: {
        set: '设置',
        edit: '修改'
      },
      oldpassword: '',
      newpassword: '',
      cfmpassword: ''
    }
  },
  computed: {
    curMode() {
      const mode = this.pageConfig.mode || 'set'
      return this.modeList[mode]
    },
    curType() {
      const type = this.pageConfig.type || 'login'
      return this.typeList[type]
    },
    pageTitle() {
      return `${this.curMode}${this.curType}密码`
    },
    ifEditMode() {
      return this.pageConfig.mode === 'edit'
    },
    ifLoginType() {
      return this.pageConfig.type === 'login'
    },
    ifOldpasswordOk() {
      return this.oldpassword.length >= 6
    },
    ifNewpasswordOk() {
      return this.newpassword.length >= 6
    },
    ifCfmpasswordOk() {
      return this.cfmpassword.length >= 6 && this.cfmpassword === this.newpassword
    },
    editParams() {
      const params = {
        newpassword: this.newpassword
      }
      if (this.ifEditMode) {
        params.oldpassword = this.oldpassword
      }
      return params
    }
  },
  onLoad() {
    console.log(this.$Route.query)
    this.pageConfig = this.$Route.query
    this.$store.dispatch('setPageTitle', this.pageTitle)
  },
  methods: {
    oldPwdInput(e) {
      this.oldpassword = e.detail.value.trim()
    },
    newPwdInput(e) {
      this.newpassword = e.detail.value.trim()
    },
    cfmPwdInput(e) {
      this.cfmpassword = e.detail.value.trim()
    },
    verifyInputValue() {
      return new Promise(resolve => {
        if (this.ifEditMode && !this.ifOldpasswordOk) {
          this.$showTipsToast('请正确输入原密码')
          resolve(false)
          return
        }
        if (!this.ifNewpasswordOk) {
          this.$showTipsToast(`请正确输入${this.curType}密码`)
          resolve(false)
          return
        }
        if (!this.ifCfmpasswordOk) {
          this.$showTipsToast(`请正确输入确认密码`)
          resolve(false)
          return
        }
        resolve(true)
      })
    },
    async onConfirm() {
      const flag = await this.verifyInputValue()
      console.log('flag', flag)
      if (!flag) return
      if (this.ifLoginType) {
        await this.resetLoginPwd()
        this.$Router.back()
      }
    },
    resetLoginPwd() {
      return new Promise(resolve => {
        this.$api.resetLoginPwd(this.editParams).then(async res => {
          if (!res) return
          await this.$showSuccessToast(`${this.curMode}成功`)
          resolve()
        })
      })
    }
  }
}
</script>

<style lang="less">
.cu-form-group .title { // 统一form内的title宽度
  min-width: calc(4em + 30px);
}
</style>
